<template>
    <layout>
        <div class="wrapper">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="name"
                    label="姓名："
                    placeholder="请输入姓名"
                    left-icon="manager"
                    :rules="[{required:true,message:'请输入名字'}]"
                    >
                </van-field>
                <van-field
                    v-model="phone"
                    label="手机号："
                    type="tel"
                    left-icon="phone"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' },{pattern:/^\d{11}$/,message:'手机号格式错误'}]">
                </van-field>

                <van-button class="btn" block type="info" native-type="submit">
                    查 询
                </van-button>

            </van-form>

        </div>
    </layout>
    
</template>

<script>
import employApi from "@/api/employ"
    export default {
        data(){
            return {
                name:"",
                phone:"",
            }
        },
        methods:{
            onSubmit(){
                let params = {
                    name:this.name.replace(/\s/g,""),
                    phone:this.phone,
                };
                employApi.searchInfo(params)
                    .then(res=>{
                        if(res.data){
                            this.$router.push({
                                path:"/employResult",
                                query:{
                                    type:res.data,
                                }
                            })
                        }else{
                            this.$dialog.alert({
                                title:"提示",
                                message:"未查询到信息"
                            })
                        }
                    })
                    .catch(err=>{
                        this.$dialog.alert({
                            title:"错误",
                            message:err
                        })
                    })


            }
        }
    }
</script>

<style lang="less" scoped>
    .wrapper{

        overflow: hidden;
        background-color: white;
        width: 93%;
        margin: auto;
        border-radius: 10px;
        margin-top: 10px;
        padding-top: 10px;
        box-shadow: 0 0 1px rgba(10px, 10px,10px,.1);
        // .title{
        //     letter-spacing: 2px;
        //     font-size: 20px;
        //     text-align: center;
        //     font-weight: bold;
        //     text-shadow: 0 0 1px;
        //     margin: 30px 0;
        // }
        .van-form{
            &::v-deep .van-cell__title {
                padding-top: 4px;
                width: 57px !important;
            }
            &::v-deep .van-field__control{
                border: 1px solid #999998;
                border-radius: 4px;
                padding: 3px 0 3px 10px;
            }
            &::v-deep .van-field__error-message{
                padding-left: 11px;
            }
            &::v-deep .van-field__left-icon{
                padding-top: 4px;
                .van-icon{
                    font-size: 20px;
                    color: #999998;
                }
            }

            // .van-cell--required {
            //     &::v-deep::before{
            //         top: 13px;
            //     }

            // }
        }
        .btn{
            height: 36px;
            margin: 10px auto;
            width: 100px;
            border-radius: 5px;
            overflow: hidden;
        }
    }
</style>
